<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹出框</title>
	<style>
		*{padding:0;margin:0;}
		#btn{
			width:120px;
			height:40px;
			border:0;
			outline:none;
			background-color:green;
		}
		#model{
			position:absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background-color:#000;
			opacity:0.5;
			z-index:10;
			display:none;
		}
		#login{
			width:400px;
			height:300px;
			border:1px solid orange;
			background-color:#ff6700;
			position:absolute;
			left:400px;
			top:200px;
			z-index:11;
			display:none;
		}
		#close{
			width:60px;
			height:30px;
		}
	</style>
</head>
<body>
	<button id="btn" >登录</button>
	<div id="model" ></div>
	<div id="login" >
		<button id="close" >X</button>
		<h1>登录</h1>
	</div>
</body>
	<script>
		btn = document.getElementById("btn");
		model = document.getElementById("model");
		login = document.getElementById("login");
		close = document.getElementById("close");

		btn.onclick=function(){
			model.style.display="block";
			login.style.display="block";
		}

		model.onclick=function(){
			model.style.display="none";
			login.style.display="none";
		}
		close.onclick=function(){
			model.style.display="none";
			login.style.display="none";
		}

	</script>
</html>